<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css1.css">
    <link rel="stylesheet" href="css2.css">
    <link rel="stylesheet" href="css3.css">
</head>

<body>
    <!-- 九分之一 头部 -->


    <div class="header">
        <div><img src="images/logo_03.png" alt="" class="logo1"></div>
        <ul class="header-ul">

            <li><a href="">首页</a> </li>
            <li><a href="">课程</a></li>
            <li><a href="">职业规划</a></li>
        </ul>
        <div class="search">
            <input type="text" value="输入关键词" class="shuru">
            <input type="button" value="" class="btn-search">
        </div>
        <div class="touxiang">
            <div class="cycle"> </div>
            <span class="name1">qq-leishui</span>
        </div>

        <div class="header3">
            <div class="denglu">登录</div>
            <span class="shugang">|</span>
            <div class="zhuce">注册</div>
        </div>
    </div>
    <!-- --------------------------- -->
    <!-- 第二个盒子 -->
    <div class="box2">
        <div class="box22center  ww">
            <div class="box22">
                <ul class="box22-ul">
                    <li><a href="#" class="box22-toubu">前端开发<span> &gt; </span></a></li>
                    <li><a href="#">后端开发<span> &gt; </span></a> </li>
                    <li><a href="#">移动开发<span> &gt; </span></a></li>
                    <li><a href="#">人工智能<span> &gt; </span></a></li>
                    <li><a href="#">商业预测<span> &gt; </span></a></li>
                    <li><a href="#">云计算&大数据 <span> &gt; </span></a></li>
                    <li><a href="#">运维&从测试<span> &gt; </span></a></li>
                    <li><a href="#">UI设计<span> &gt; </span></a></li>
                    <li><a href="#">产品<span> &gt; </span></a></li>

                </ul>
            </div>
            <div class="box222">
                <!-- 两个div 大div里 是 ul 加一个链接 -->
                <div class="kechengbiao">
                    <h3>我的课程表</h3>
                </div>
                <div>
                    <ul class="kechengbiaoliebiao">

                        <li><a href=""><span>继续学习</span> <h4>程序语言设计</h4> <br>
                            <em>正在学习-使用对象</em></a>
                        </li>
                        <li><a href=""><span>继续学习</span> <h4>程序语言设计</h4> <br>
                            <em>正在学习-使用对象</em></a>
                        </li>
                        <li><a href=""><span>继续学习</span> <h4>程序语言设计</h4> <br>
                            <em>正在学习-使用对象</em></a>
                        </li>
                    </ul>
                </div>
                <a href="" class="quanbukecheng">全部课程</a>
            </div>
        </div>

    </div>

    <!-- 第三个盒子------------- -->
    <div class="box3 ww">
        <div class="box331">
            精品推荐
        </div>
        <ul class="box33ul">
            <li><a href="">JQuery</a></li>
            <li><a href="">Spark</a></li>
            <li><a href="">MySQL</a></li>
            <li><a href="">JavaWeb</a></li>
            <li><a href="">MySQL</a></li>
            <li><a href="">JavaWeb</a></li>
        </ul>
        <div class="box3-xingqu">修改兴趣</div>
    </div>
    <!-- ------第四个盒子------ -->
    <div class="box4 ww">
        <!-- 整体一个小盒子banner加一个大盒子里面的<li></li> -->
        <div class="box441">
            <h4 class="tuijian">精品推荐</h4>
            <a href="" class="lookall">查看全部</a>
        </div>
        <div class="box442">
            <ul>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box4-img"></div>
                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- ----第五个盒子------ -->
    <!-- -------- 四个大模块 1.banner分三部分 h4 、ul>li>a*4链接、a链接---------- -->
    <div class="box5 ww">
        <div class="box551">
            <h4>编程入门</h4>
            <!-- 热门              初级              中级              高级 -->
            <ul>
                <li><a href="">热门</a></li>
                <li><a href="">初级</a></li>
                <li><a href="">中级</a></li>
                <li><a href="">高级</a></li>
            </ul>
            <a href="">查看全部</a>
        </div>
        <div class="box552">
            <div class="box5img1"></div>
            <div class="box5img2"></div>
            <ul>
                <li>
                    <a href="">
                        <div class="box5-img3"></div>
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box5-img3"></div>
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box5-img3"></div>
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="box5-img3"></div>
                        <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                        <span> <em>高级</em> •  1125人在学习</span>
                    </a>
                </li>
            </ul>

        </div>
    </div>
    <!-- -------------------第六个盒子-------------- -->
    <div class="box6 ww">
        <div class="box61">
            <h4>数据分析师</h4>
            <ul>
                <li><a href="">热门</a></li>
                <li><a href="">初级</a></li>
                <li><a href="">中级</a></li>
                <li><a href="">高级</a></li>
            </ul>
            <a href="" class="lookall6">查看全部</a>
        </div>
        <div class="box62">
            <div class="box6cebian"></div>
            <div class="box62banner"></div>
            <ul>
                <li>
                    <a href="#">
                        <div class="img4"></div>
                        <h4>kmi2首页界面切换效果</h4>
                        <span> <em>初级</em>   •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img4"></div>
                        <h4>kmi2首页界面切换效果</h4>
                        <span> <em>初级</em>   •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img4"></div>
                        <h4>kmi2首页界面切换效果</h4>
                        <span> <em>初级</em>   •  1125人在学习</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img4"></div>
                        <h4>kmi2首页界面切换效果</h4>
                        <span> <em>初级</em>   •  1125人在学习</span>
                    </a>
                </li>
            </ul>
        </div>

    </div>

    <!-- ----------第七个盒子-------- -->
    <div class="box7 ww">
        <div class="box771">
            <h4>机器学习工程师</h4>
            <!-- 热门              初级              中级              高级 -->
            <ul>
                <li><a href="">热门</a></li>
                <li><a href="">初级</a></li>
                <li><a href="">中级</a></li>
                <li><a href="">高级</a></li>
            </ul>
            <a href="">查看全部</a>
        </div>

        <ul class="box772">
            <li>
                <a href="">
                    <div class="box7img"></div>
                    <h4>Android Hybrid APP开发实战 H5+原生!</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box7img"></div>
                    <h4>Android Hybrid APP开发实战 H5+原生!</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box7img"></div>
                    <h4>Android Hybrid APP开发实战 H5+原生!</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box7img"></div>
                    <h4>Android Hybrid APP开发实战 H5+原生!</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box7img"></div>
                    <h4>Android Hybrid APP开发实战 H5+原生!</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- -------------第八个盒子复制第七个盒子------------ -->

    <div class="box8 ww">
        <div class="box881">
            <h4>机器学习工程师</h4>
            <!-- 热门              初级              中级              高级 -->
            <ul>
                <li><a href="">热门</a></li>
                <li><a href="">初级</a></li>
                <li><a href="">中级</a></li>
                <li><a href="">高级</a></li>
            </ul>
            <a href="">查看全部</a>
        </div>

        <ul class="box882">
            <li>
                <a href="">
                    <div class="box8img"></div>
                    <h4>微软人工智能-数据分析平台</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box8img"></div>
                    <h4>微软人工智能-数据分析平台</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box8img"></div>
                    <h4>微软人工智能-数据分析平台</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box8img"></div>
                    <h4>微软人工智能-数据分析平台</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="box8img"></div>
                    <h4>微软人工智能-数据分析平台</h4>
                    <span><em>初级</em> •  125人在学习</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- ------------第九个盒子----------------- -->
    <div class="box9">
        <!-- 左边一个div 右边三个<dl></dl> -->
        <div class="box9left">
            <img src="images/logo_03.png" alt="" class="box9img"><br>
            <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
            <a href="#">下载APP</a>
            <!-- 加个border -->
        </div>
        <div class="box92right">
            <dl>
                <dt> <a href="">关于学成网</a> </dt>
                <dd><a href="">关于</a></dd>
                <dd><a href="">管理团队</a></dd>
                <dd><a href="">工作机会</a></dd>
                <dd><a href="">客户服务</a></dd>
                <dd><a href="">帮助</a></dd>
            </dl>
            <dl>
                <dt><a href="">新手指南</a></dt>
                <dd><a href="">如何注册</a></dd>
                <dd><a href="">如何选课</a></dd>
                <dd><a href="">如何拿到毕业证</a></dd>
                <dd><a href="">学分是什么</a></dd>
                <dd><a href="">考试未通过怎么办</a></dd>
            </dl>

            <dl>
                <dt><a href="">合作伙伴</a></dt>
                <dd><a href="">合作机构</a></dd>
                <dd><a href="">合作导师</a></dd>
            </dl>
        </div>




    </div>

</body>

</html>